<template>
    <div>
        <div ref="chart" class="chart"></div>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const chart = ref();
const data = ref([
    {
        value: 335,
        name: "直接访问",
    },
    {
        value: 234,
        name: "联盟广告",
    },
    {
        value: 1548,
        name: "搜索引擎",
    },
]);
function initChart() {
    const myChart = echarts.init(chart.value);
    myChart.setOption({
        title: {
            text: "销售统计",
        },
        label: {
            formatter: "{b} {c} {d}%",
        },
        series: [
            {
                type: "pie",
                data: data.value,
            },
        ],
    });
}
onMounted(() => {
    initChart();
});
</script>
<style scoped>
.chart {
    width: 100%;
    height: 400px;
}
</style>
